/* border: 1px solid tomato; */
@media screen and (max-width: 960px) {
    body{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100vw;
    }
    #app{
        width: 100%;
    }
    header{
        width: 100%;
    }
    #nav_bar {
        width: 100%;
        justify-content: center;
        align-items: center;
        line-height: 0;
        padding: 20px 0;
        position: relative;
        box-shadow: 0px 0px 1px 1px #80808042;
    }
    #nav_bar>#nav_bar_Name{
        margin: 0;
        width: fit-content;
    }
    #nav_bar:hover > #nav_bar_Info{
        transform: translate(0,0);
        transition: all 1s ease-in;
    }
    div#nav_bar_Info {
        padding: 10% 0 0 0;
        width: 80%;
        position: absolute;
        top: 0%;
        left: 0%;
        background-color: #ffffffcb;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        border: none;
        text-align: right;
        box-shadow: 0px 0px 1px 1px rgba(214, 214, 214, 0.747);
        /* display: none; */
        transform: translate(-100%,0);
        transition: all 1s ease-in;
    }

    #main_ct img {
        width: 40px;
        height: 40px;
    }
    #main_ct .ct_link{
        font-size: 1rem;
    }
    #main_ct{
        grid-row-gap: 25px;
        padding-top: 30px;
        flex-direction: column;
    }

    #main {
        width: 100%;
        margin: 0 0;
        padding: 0 0px;
        text-align: center;
    }
    #am {
        margin: 0px 0px 0 0px;
        display: block;
        position: relative;
    }
    #main_am_info {
        color: rgba(0, 0, 0, 0.678);
        padding: 80px 0 80px 0;
        font-size: 2rem;
        font-weight: bolder;
    }
    #main_am_info{
        text-shadow: 1px 2px 5px rgb(252, 250, 250);
    }
    #main_am_img{
        position: absolute;
        top: 5%;
        left: 0%;
        z-index: -1;
        transition: all 1s ease-in;
    }
    #main_am_instruction{
    }
    #main_am_instruction > table th ,td{
        padding: 10px 0px 0 15px;
    }

    #main_skill_img{
        display: none;
    }
    #main_skill{
        display: block;        
    }
    #main_skill h2{text-align: center;}
    #main_skill_front,#main_skill_back{
        margin: 0 30px 30px 30px;
        text-align: left;
    }




    #wk {
        width: 95%;
        margin: 0 auto;
    }
    #main_work {width: 100%;border:none ;}
    #main_work_content {
        width: 100px;
        height: 100px;
    }
}